<template>
    <div>
        <div class="quanyou">
            <ul>
                <li v-for="(item,index) in friendList">
                    <div class="friendImg">
                        <img :src="item.url">
                    </div>
                    <div class="quanyouTit">
                        <span class="quanyouTime">{{item.applyTime | endtimeStamp}}</span>
                        好友申请
                    </div>
                    <div class="quanyouBtn">
                        <p v-if="item.applyState!='adopt'" @click="greed(item.friendId,item.id,index)">接受</p>
                        <p v-if="item.applyState=='adopt'" class="added">已添加</p>
                        <span v-if="item.applyState!='adopt'"><span>{{item.usrName}}</span>请求加你为券友</span>
                        <span v-if="item.applyState=='adopt'"><em class="left">你和</em><span>{{item.usrName}}</span>已经是券友了</span>
                    </div>
                </li>
            </ul>
            <no-data v-if="noInfo"></no-data>
        </div>
        <!-- <div class="loading-box">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreFriend"></list-loading>
        </div> -->
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import getData from '../../service/getData.js'
    import listLoading from '../../componentes/global/listLoading.vue'
    import { mapState } from 'vuex'
    import { Toast } from 'mint-ui'
    export default {
        data(){
            return{
                loading:true,
                noMoreFriend:true,
                agreeState:0,
                noInfo:false
                // friendList:[{friendId:10015,usrName:'名字'}]
            }
        },
        created:function(){
            this.$store.commit(types.friendList);
            this.$store.commit(types.friendList_page,1);
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList();
        },
        components: {
            listLoading
        },

        computed:{
            ...mapState({
                    friendList:state => state.info.friendList,
                    friendPageLimit:state => state.info.friendPageLimit,
                    userInfo:state => state.user.userInfo
            })
        },
        methods:{
            clickMoreList:function(){
                if(!this.noMoreFriend){//防止重复点击
                    return
                }
                let me = this;
                this.noMoreFriend = false;
                this.$store.dispatch("newFriend",{method:'post',usrId:me.usrId}).then(rep => {
                    if(rep.content.list.length<=0){
                        me.noInfo=true;
                    }else{
                        me.noInfo=false;
                    }
                    if(rep.content.list){
                        if(rep.content.list.length < me.friendPageLimit){
                            setTimeout(function(){me.noMoreFriend = true;},300);
                        }
                        if(rep.content.list.length == me.friendPageLimit){//如果列表数据够15条，开启下拉加载
                            me.loading = false;
                            me.noMoreFriend = false;
                        }
                    }else{
                        setTimeout(function(){me.noMoreFriend = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreFriend = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreFriend = true;
                this.clickMoreList();
            },
            //同意
            greed:function(friendId,id,index){
                var that=this;
                // console.log(friendId);

                getData.agreeFriend({method:'post',data:{"friendId":friendId.toString(),id:id.toString()}},that.userInfo.usrId).then(rep => { //this.userInfo.usrId
                    if(rep.respCode == '00'){
                        console.log(rep);
                        that.friendList[index].applyState='adopt'
                        Toast({
                            message: '同意成功',
                            duration: 800
                        });
                    }else{
                        Toast({
                            message: '操作失败',
                            duration: 800
                        });

                    }
                }).catch(rep => {
                    console.log(rep);
                })
            }
        }
    }
</script>
<style>

</style>
